<template>
	<view class="">

		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle bg-white">{{title}}</block>

		</cu-custom>
		<Loading class="loading-box" v-show="!isLoading" :isStatus='loadStatus'></Loading>

		<scroll-view scroll-y="true" :style="{height: swiperHeight+'px'}">
			<view class="">
				<view class="oi-detail">

					<view class="oi-goods">
						<view class="oi-shop-info">
							<view class="oi-shop-title"
								style="display: flex;align-items: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								<text>{{orderInfo.shop.shop_name || '--'}}</text>
							</view>
							<view class="call" @click="call(orderInfo.shop.mobile)">
								<text class="cuIcon-dianhua text-black text-xl " style="font-size: 38rpx;"></text>
								<!-- <uni-icons type="phone" color="#000000" size="25"></uni-icons> -->
							</view>
						</view>
						<view class="line-gray">

						</view>
						<view class="oi-goods-list">
							<view class="oi-goods-item">
								<image class="goodsThumb" :src="orderInfo.shop.logo" mode="aspectFill"></image>

								<view class="goods-detail">
									<view class="goodsName ellipsis">{{orderInfo.goods_name}}</view>

								</view>
								<view class="goods-price">
									<view class="realprice"><text>￥{{orderInfo.online_amount}}</text></view>

								</view>
							</view>
						</view>
					</view>
					<view class="oi-orther-detail ">
						<view class="oi-orther-item">
							<text class="oi-tit">订单编号：</text>
							<text class="gray-color oi-order-text"
								style="letter-spacing:5rpx">{{orderInfo.order_sn}}</text>
						</view>
						<view class="oi-orther-item">
							<text class="oi-tit">支付方式：</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='wxpay'">微信</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='wxgzh'">微信</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='wxpayApp'">微信</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='alipay'">支付宝</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='other'">其他</text>
						</view>
						<view class="oi-orther-item">
							<text class="oi-tit">购买天数：</text>
							<text class="gray-color oi-order-text " >{{orderInfo.add_day}}天</text>
						</view>
						<view class="oi-orther-item">
							<text class="oi-tit">支付状态：</text>
							<text class="gray-color oi-order-text"
								style="letter-spacing:5rpx">{{orderInfo.pay_status==1?"已支付":"未支付"}}</text>
						</view>
						<view class="oi-orther-item" v-if="orderInfo.pay_status==1">
							<text class="oi-tit">支付时间：</text>
							<text class="gray-color oi-order-text"
								style="letter-spacing:5rpx">{{orderInfo.pay_time}}</text>
						</view>
						<view class="oi-orther-item">
							<text class="oi-tit">订单时间：</text>
							<text class="gray-color oi-order-text">{{orderInfo.created_at || '--'}}</text>
						</view>


					</view>



				</view>
			</view>

			<view class="foot">

			</view>
		</scroll-view>
	</view>


</template>

<script>
	
	export default {
		
		data() {
			return {
				isLoading: false, //是否加载完成显示
				loadStatus: 'load',
				title: "订单详情",
				order_id: 0,
				StatusBar: this.Custom,
				orderInfo: {
					shop: {},
					order_bill: {}
				},
				cartInfo: {},
				cartList: {},
				cartGoodsNum: {},
				goodsList: {},
				timeID: 0,
				swiperHeight: '0px',
			}
		},
		onLoad(option) {
			this.order_id = option.order_id
			this.getOrder()
		},
		onShow(option) {

		},
		onPullDownRefresh() {
			this.getOrder()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		mounted() {

			this.getInfo().then((e) => {

				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height);

			});

		},
		methods: {
			errorImg(index) { //图片加载失败给出默认图
				this.orderInfo.order_goods[index].thumb = this.resDomain + "/static/img/error.png";
				this.$set(this.orderInfo.order_goods, index, this.orderInfo.order_goods[index]);
			},
			errorLogo() {
				this.$nextTick(() => {
					this.orderInfo.shop.logo = this.resDomain + "/static/img/error.png";
				})
			},
			getOrder() {
				this.apiRequest('/buyer/SportOrderInfo', {
					order_id: this.order_id
				}, 0, 'get').then(res => {

					this.orderInfo = res.data;
					this.isLoading = true;

				})
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},


		}
	}
</script>

<style scoped>
	view {
		line-height: 1.8;
	}

	.oi-detail {
		width: 94%;
		margin-left: 3%;
		height: 100%;
		margin-top: 10upx;
	}

	.line-gray {
		width: 100%;
		height: 2upx;
		background-color: #EEEEEE;
		opacity: 0.4;
		margin: 20upx 0 20upx 0;
	}

	.use-style {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 10upx;
	}

	.oi-header,
	.oi-deliver,
	.oi-goods,
	.oi-fee,
	.oi-total,
	.oi-orther-detail {
		background: #FFFFFF;
		padding: 30rpx 5%;
		margin-bottom: 15rpx;
		border-radius: 20rpx;

	}

	.oi-header .oi-order-status {
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.oi-header .oi-thank {
		color: #666666;
		font-size: 24rpx;
	}

	.oi-thank {
		padding: 5upx 0 5upx 0;
	}

	.oi-header .oi-order-btn {
		margin-top: 15rpx;
	}

	.oi-header .oi-order-btn text {
		padding: 10rpx 20rpx;
		margin-right: 15rpx;
		border-radius: 20rpx;
		border: solid 1px #dbdbdb;
		font-size: 28rpx;
		color: #999999;
	}

	.oi-header .oi-order-btn .order-btn-blue {
		background-color: #3589f7;
		color: #FFFFFF;
		border-radius: 20rpx;
	}

	.oi-deliver {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.oi-deliver .horseInfo .notice {
		color: #1270e0;
		font-size: 18rpx;
	}

	.oi-deliver .horseInfo .ps-ico {
		font-size: 20rpx;
		margin-left: 10rpx;
	}

	.oi-shop-info {
		display: flex;
		align-items: center;
	}

	.oi-deliver .call,
	.oi-shop-info .call {
		margin-left: auto;
	}

	.oi-goods .oi-shop-info {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.oi-goods .oi-shop-info .oi-shop-logo {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		margin-top: 8rpx;
	}

	.oi-goods .oi-shop-info .oi-shop-title {
		margin-left: 10rpx;
		font-weight: bold;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.oi-goods-list {
		margin-top: 40rpx;
	}

	.oi-goods-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-bottom: 15rpx;
	}

	.oi-goods-item view {
		line-height: 1.4;
	}

	.oi-goods-item .goodsThumb {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.oi-goods-item .goods-detail {
		margin-left: 10rpx;
		width: 65%;
	}

	.oi-goods-item .goods-detail .goodsName {
		width: 100%;
		font-weight: bold;
	}

	.oi-goods-item .goods-detail .goodsSpec text {
		font-size: 20rpx;
		margin-right: 15rpx;
		color: #666666;
	}

	.oi-goods-item .goods-detail .goodsNum {
		font-size: 20rpx;
		margin-top: 10rpx;
	}

	.oi-goods-item .goods-price {
		margin-left: auto;
		width: 15%;
		text-align: right;
	}

	.oi-goods-item .goods-price .markprice {
		font-size: 24rpx;
		margin-top: 15rpx;
		text-decoration: line-through;
		color: #666666;
	}

	.oi-fee-item {
		min-height: 80upx;
		align-items: center;
	}

	.oi-fee-item,
	.oi-orther-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 10rpx;
		font-size: 28rpx;
		width: 100%;
	}

	.oi-fee-item .minusfee {
		color: #FF3333;
	}

	.oi-total {
		text-align: right;
	}

	.oi-tit {

		white-space: nowrap;
	}

	.oi-total .total-prom {
		color: #666666;
		font-size: 24rpx;
	}

	.oi-total .total-price {
		font-weight: bold;
		margin-left: 10rpx;
	}

	.oi-orther-item {
		display: flex;
		min-height: 80upx;
		justify-content: space-between;
	}

	.oi-orther-item view {
		text-align: right;
	}

	.oi-orther-item .tit {
		color: #666666;
		width: 20%;
	}

	.oi-orther-item .copy-btn {
		margin-left: auto;
	}

	.tit-box {
		padding: 5rpx 15rpx 5rpx 15rpx;
		background: #FFF0F0;
		border: 2upx solid #F4D5D5;
		border-radius: 10upx;
	}

	.tit-style {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.oi-order-text {
		word-wrap: break-all;
		word-break: break-word;
		text-align: right;
	}
</style>
